function getCurrentDateTime(selectTime,line){
    var myDate = null;
    if(selectTime){
        myDate = new Date(selectTime);
    }else{
        myDate = new Date();
    }
    var _year = myDate.getFullYear();
    var _month = myDate.getMonth() + 1;
    var _day = myDate.getDate();

    if(_month < 10){
        _month = '0' + _month;
    }
    if(_day < 10){
        _day = '0' + _day;
    }
    return _year + line[0] + _month + line[1] + _day + line[2];

}
//拿到表格及echars的表格时间名
function setVisitorDetailTitle(selectTime){
    var timeTile = getCurrentDateTime(selectTime,['年','月','日']) + '客流数据'
    $('.visitor-detail-table .table-title').text(timeTile)

    var timeTile2 = getCurrentDateTime(selectTime,['年','月','日']) + '客流统计表（24时）'
    $('.visitor-detail-chart .visitor-detail-chart-title').text(timeTile2)
}
//表格数据及dom实现
function setTableData(datas,maxTime,total){

    var _datas = [];

    datas.forEach(function(val){
        var nowPopular = val.realtimeNumber === undefined ? '--' :  val.realtimeNumber;
        var level = '四级';
        var levelData = Global.spot_level[val.spotCode];
        for (var key in levelData) {
            if (nowPopular.toString().indexOf('<') === -1 && nowPopular >= key) {
                level = levelData[key];
            }
        }
        _datas.push({
            time:val.createTime,
            liuliang:nowPopular,
            // fengzhi:maxTime,
            // total:total,
            level:level
        })
    })
    var html = ''
    _datas.forEach(function(val,i){
        if(i == 0){
                html += '<div class="table-content-item special">'
            for(var key in val){
                if(key === 'level'){
                    switch(val[key]){
                        case '四级':
                            html += '   <div class="s-title s-'+key+' c-four">'+val[key]+'</div>'
                            break;
                        case '三级':
                            html += '   <div class="s-title s-'+key+' c-three">'+val[key]+'</div>'
                            break;
                        case '二级':
                            html += '   <div class="s-title s-'+key+' c-two">'+val[key]+'</div>'
                            break;
                        case '一级':
                            html += '   <div class="s-title s-'+key+' c-one">'+val[key]+'</div>'
                            break;
                    }
                }else{
                    html += '   <div class="s-title s-'+key+'">'+val[key]+'</div>'
                }

            }
            html += '</div>'
        }else{
            html += '<div class="table-content-item">'
            for(var key in val){
                if(key === 'level'){
                    switch(val[key]){
                        case '四级':
                            html += '   <div class="s-title s-'+key+' c-four">'+val[key]+'</div>'
                            break;
                        case '三级':
                            html += '   <div class="s-title s-'+key+' c-three">'+val[key]+'</div>'
                            break;
                        case '二级':
                            html += '   <div class="s-title s-'+key+' c-two">'+val[key]+'</div>'
                            break;
                        case '一级':
                            html += '   <div class="s-title s-'+key+' c-one">'+val[key]+'</div>'
                            break;
                    }
                }else{
                    html += '   <div class="s-title s-'+key+'">'+val[key]+'</div>'
                }
    
            }
            html += '</div>'
        }
    })

    $('.visitor-content').find('.table-box-content').html('').append(html);
}

function setChartData(data){

    var _data = [];
    var hours = [];
    for(var i=0;i<24;i++){
        hours.push(i);
    }
    var _time = [];
    data.forEach(function(val){
        var _hour = new Date(val.createTime).getHours();
        _time.push(_hour);
        _data.push(0);
    })

    data.forEach(function(val,i){
        _data[_time[i]] = val.realtimeNumber;
    })
    
    var myChart = echarts.init(document.getElementById('visitor-detail-chart-box'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: function(params){
                return '客流量' + '</br>' + params[0].axisValue + '时:' + params[0].value + '人'
            }
        },
        grid: {
            top: '10%',
            left: '6%',
            right: '12%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            color: '#59588D',
            name: "(时间/h)",
            nameTextStyle: {
                color: '#FFF',
                fontSize: 18
            },
            axisLine: {
                show: true
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                // show: true
            },
            axisTick: {
                show: false
            },
            // boundaryGap: true,
            data: hours
        }],

        yAxis: [{
            type: 'value',
            min: 0,
            name: "(人)",
            nameTextStyle: {
                color: '#FFF',
                fontSize: 18
            },
            splitNumber: 4,
            splitLine: {
                show: true,
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFF',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: 'rgba(131,101,101,0.2)',
                    type: 'dashed',
                }
            }
        }],
        series: [{
            name: '',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    color: "#468EF0"
                },
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#48B3FF',
                }
            },

            itemStyle: {
                color: "#FFF",
                borderColor: "#468EF0",
                borderWidth: 2,
                
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(70,142,240,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(70,142,240,0.1)'
                        }
                    ], false),
                    shadowColor: 'rgba(70,142,240,0.1)',
                    shadowBlur: 20
                }
            },
            data: _data
        }]
    };

    myChart.setOption(option);
    window.addEventListener('resize',function(){
        myChart.resize();
    })

}

function getHistorySpotDataCountByButton(selectTime,spotName,day){
    getHistorySpotDataCount({
        data:JSON.stringify({
            spotName: spotName,
            day: day
        }),
        success:function(data){
            if(data.error_code == 0){

                Global.maxTime = data.maxTime;
                Global.total = data.total;
                Global.huanbi = data.huanbi.toString().replace(/[%]/g,'');
                if(Global.huanbi == 0){
                    Global.huanbi = -15.6
                }
                //Global.huanbi = data.huanbi || '';
                Global.realTime = data.realTime.reverse();
                Global.everyHour = data.everyHour;
                setVisitorDetailTitle(selectTime);

                $('.page-total-before').text('1');
                $('.page-total-after').text(pageCount(data.realTime.length,10));
                Global.pageStart = 0;
                Global.pageEnd = 10;
                setTableData(data.realTime.slice(Global.pageStart,Global.pageEnd),Global.maxTime,Global.total);
                setChartData(data.everyHour);
                $('.fengzhi-num').text('峰值：'+Global.maxTime)
                $('.total-num').text('总人次：'+Global.total)
                $('.sequential-num').text('环比：'+Global.huanbi+'%')
            }
        }
    })
}

function pageCount(totalRecord,limit) {
    return totalPage = parseInt(totalRecord / limit) + 1;
}


function updateListener(){
    if(Global.updateListener){
        Global.updateListener = clearInterval(Global.updateListener)
    }
    Global.updateListener = setInterval(function(){
        if(Global.currenntTimeSplit == Global.timeT){
            getHistorySpotDataCountByButton(Global.currenntTimeSplit,Global.currentSpotArea,Global.currenntTimeSplit)
        }
    },20000)
}

updateListener()